import React, { Component } from 'react';
import fetch from 'isomorphic-fetch';
import Toast from 'antd-mobile/lib/toast';
import Menu from 'shared/components/Menu';
import HeaderNav from 'shared/components/HeaderNav';
import joinUrl from 'shared/utils/joinUrl';
import { fetchHomeInfodetail } from '../api';

const getBodyExpression = /<body[^>]*>([\s\S]*)<\/body>/;

class Detail extends Component {

  state = {
    content:''
  }

  componentDidMount(){
    const { id } = this.props.match.params;
    Toast.info('加载中', 10000)
    fetchHomeInfodetail({ information_id: id }).then((res) => {
      const { data = {} } = res;
      const { description } = data;
      const url = description && description.replace(/<[^>]+>/g,'');
      if (description) {
        fetch(joinUrl(url))
          .then((response) => {
            return response.text()
          })
          .then((res) => {
            const contentHtml = res.match(getBodyExpression)
            const content = contentHtml && contentHtml[0];
            Toast.hide()
            this.setState({ content });
          })
          .catch(function(ex) {
            console.log('parsing failed', ex)
            Toast.hide()
          })
      }
    })
  }

  render() {
    const { content } = this.state;
    return (
      [
        <HeaderNav key="HeaderNav" showSearch={false} title="" />,
        <div key='content' className="friend-content" dangerouslySetInnerHTML={{ __html: content }} />,
        <Menu key='menu' />]
    );
  }
}
export default Detail;
